<template>
	<view>
		
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-hello-text">
				Flex是Flexible Box的缩写，布局有利于跨更多平台，尤其是采用原生渲染的平台。
			</view>
			
			<view class="uni-title uni-common-mt">
				flex-direction: row
				<text>\n横向布局</text>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item uni-bg-red">A</view>
				<view class="flex-item uni-bg-green">B</view>
				<view class="flex-item uni-bg-blue">C</view>
			</view>
		</view>
			

		

	</view>

</template>

<script>
	export default {
		data() {
			return {
				energyMonth: {
					total: 100,
					production: 46
				},
				energyYear: {
					total: 580,
					production: 129
				},
				opt: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
						confine: true
					},
					legend: {
						bottom: 'bottom',
						center: 'center'
					},

					xAxis: [{
						type: 'category',
						data: ['202501', '202502', '202503', '202504', '202505', '202506', '202507']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '生产用电',
							type: 'bar',
							stack: 'Ad',
							barWidth: '20%',
							emphasis: {
								focus: 'series'
							},
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '非生产用电',
							type: 'bar',
							stack: 'Ad',
							barWidth: '20%',
							emphasis: {
								focus: 'series'
							},
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '辅助生产用电',
							type: 'bar',
							stack: 'Ad',
							barWidth: '20%',
							color: '#9f7ca6',
							emphasis: {
								focus: 'series'
							},
							data: [150, 232, 201, 154, 190, 330, 410]
						}

					]
				}
			}
		}
	}
</script>

<style>
	/*每个页面公共css */
	.container {
		top: 200px;

	}
	
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
	
	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
	
	.desc {
		/* text-indent: 40rpx; */
	}
	.flex-pc {
		display: flex;
		justify-content: center;
	}
</style>